<template>
  <div class="container">
    <Header></Header>
    <el-row>
      <el-col :span="10" :offset="6" class="infoContent">
        <el-card class="box-card">
          <el-row class="title">
            <el-col><h2>这是一个很长的标题，很长很长的标题</h2></el-col>
          </el-row>
          <el-divider class="splitLine"></el-divider>
          <el-row>
            <el-col :span="2">
              <el-popover
                placement="bottom-start"
                title="标题"
                width="200"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
              >
                <h1>快来看看</h1>
                <el-avatar
                  shape="square"
                  slot="reference"
                  :size="medium"
                  src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
                ></el-avatar>
              </el-popover>
            </el-col>
            <el-col :span="10" class="intro">
              <el-link :underline="false" class="author">王超军</el-link
              ><span>·10000阅读</span>
              <span>·1000阅读</span>
              <span>·2022-7-27 18:06&nbsp;发布</span>
            </el-col>
            <el-col :span="2" :offset="10">
              <el-button class="attenButton" type="primary" size="mini"
                >关注</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
            <h3>一大片文章</h3>
          </el-row>
          <el-row>
            <el-col :span="12" style="text-align: left">
              <el-link type="primary" href="#" target="_blank"
                >上一篇：vue啥啥啥...</el-link
              >
            </el-col>
            <el-col :span="11" style="text-align: right">
              <el-link type="primary" href="#" target="_blank"
                >下一篇：java基础...</el-link
              >
            </el-col>
          </el-row>
          <el-row>
            <el-row :gutter="20">
              <el-col :span="10" style="text-align: left; margin-top: 7px">
                <el-link type="primary" :underline="false">赞123</el-link>
                <el-link type="primary" :underline="false">&emsp;踩121</el-link>
                <el-link
                  icon="el-icon-chat-dot-round"
                  type="info"
                  style="margin-left: 15px"
                  :underline="false"
                  @click="openComment"
                  >10条评论</el-link
                >
              </el-col>
              <el-col :span="13" style="text-align: right">
                <el-link icon="el-icon-star-off" type="info" :underline="false"
                  >收藏</el-link
                >
                <el-link
                  icon="el-icon-s-promotion"
                  type="info"
                  style="margin-left: 15px"
                  :underline="false"
                  >分享</el-link
                >
                <el-dropdown
                  @command="handleCommand"
                  style="margin-left: 10px"
                  size="mini"
                >
                  <span class="el-dropdown-link">
                    <li
                      class="el-icon-more-outline"
                      style="color: #409eff; margin-top: 8px; margin-right: 9px"
                    ></li>
                  </span>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a" icon="el-icon-warning-outline"
                      >举报</el-dropdown-item
                    >
                    <el-dropdown-item command="a" icon="el-icon-remove-outline"
                      >不感兴趣</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-row>
          <el-row>
            <Comment v-show="commentVisible"></Comment>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "../components/Header";
import Comment from "@/components/Comment.vue";
export default {
  data() {
    return {
      commentVisible: false,
    };
  },
  components: { Header, Comment },
  methods: {
    //打开评论组件
    openComment() {
      this.commentVisible = !this.commentVisible;
    },
  },
};
</script>

<style scoped>
.test {
  height: 800px;
  width: 300px;
}
.infoContent {
  margin-top: 20px;
}
.splitLine {
  margin-top: 10px;
  margin-bottom: 10px;
}
.intro {
  font-size: 8px;
  line-height: 11px;
  margin-top: 29px;
  text-align: left;
  color: #9ec1eb;
}
.author {
  font-size: 8px;
}
.attenButton {
  margin-top: 10px;
}
</style>